<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
          name="viewport">
    <title>title</title>
    <link href="../../static/vant_v4/index.css" rel="stylesheet"/>
    <style>
        #app {
            background: rgba(255, 50, 75, 0);
            height: 100%;
            overflow: hidden;
            width: 100%;
        }

        .contentHome {
            text-align: center;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            position: absolute;
        }

        /* 竖屏 */
        @media screen and (orientation: portrait) {
            .search_content_class {
                margin-top: 0.3rem;
                /*top: 2rem;*/
                width: 100%;
                /*border: 2px solid #2365df;*/
            }

            .table_content_class {
                /*border: 2px solid #cc2844;*/
            }

            .table_content_th {

            }

            .table_content_datalist {
                height: 86vh;
                overflow: auto;
                /*width: 100%;*/
                /*border: 2px solid #cc2844;*/
            }

            .contentVisitorInformationInfo {
                height: 90vh;
                overflow: auto;
                /*    border: 2px solid #cc2844;*/
            }
        }

        /* 横屏 */
        @media screen and (orientation: landscape) {
            .search_content_class {
                margin-top: 0.3rem;
                /*top: 2rem;*/
                width: 100%;
                /*border: 2px solid #2365df;*/
            }

            .table_content_class {
                /*border: 2px solid #cc2844;*/
                height: 86vh;
            }

            .table_content_th {

            }

            .table_content_datalist {
                height: 75vh;
                overflow: auto;
                /*width: 100%;*/
                /*border: 2px solid #cc2844;*/
            }

            .contentVisitorInformationInfo {
                height: 75vh;
                overflow: auto;
                top: 5px;
                /*border: 2px solid #cc2844;*/
            }

            .VisitorInformationButton {

            }
        }

        @media screen and  (max-width: 768px) {
            .app .operation-wrapper .el-header {
                height: 22% !important;
            }

            .app .operation-wrapper .el-main {
                padding: 0px 16px !important;
                height: calc(100% - 22%);
                overflow-y: auto;

            }
        }

        @media screen and (min-width: 768px) and (max-width: 1200px) {
            .app .operation-wrapper .el-header {
                height: 16% !important;
            }

            .app .operation-wrapper .el-main {
                padding: 0px 16px !important;
                height: calc(100% - 16%);
                overflow-y: auto;

            }
        }


        .search_class {
            /*border: 2px solid #2365df;*/

        }

        .header_class_icon {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;


        }

        .header_icon {
            width: 2rem;
            height: 2rem;
        }

        /*奇数列*/
        .odd_column_light {
            background-color: rgb(239, 240, 242);
        }

        /*偶数列*/
        .even_column_light {
            background-color: #eff1f6;
        }

        .table_content_color_light {

        }

        .table_content_color_dark {
            color: white;
        }

        .table_th_class_light {
            background-color: rgb(223, 225, 230);
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }

        .van-theme-dark body {
            text-color: #f5f5f5;
            background-color: black;
        }

        .contentVisitorInformation {
            text-align: center;
            height: 100%;
            width: 100%;
            position: absolute;
            overflow: hidden;
            top: 5px;
        }

        .child_checkbox {
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .bottom_button {
            border-radius: 2rem;
        }

        .table_van_cell_group {
            border: 1px solid #dfdfdf;
        }

        body {
            overflow: hidden;
        }
    </style>
    <style>
        .floatBtn {
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            position: fixed;
            z-index: 1;
            overflow: hidden;
            width: 100px;
            left: calc(100% - 85px);
            top: calc(100% - 100px);
            color: #e7e9ee;
            background: #27a1f9;
            font-size: 14px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
        }

        .floatBtn.rightBtn {
            border-radius: 20px 0 0 20px;
        }

        .floatBtn.leftBtn {
            border-radius: 0 20px 20px 0;
        }

        .floatBtn.moveBtn {
            border-radius: 20px;
        }

        /*# sourceMappingURL=index.css.map */

    </style>

</head>
<body>
<script src="../../static/vue/vue.global.js"></script>
<!--<script src="../../static/vconsole/vconsole.min.js"></script>-->
<script src="../../static/axios/axios.min.js"></script>
<script src="../../static/vant_v4/vant.min.js"></script>
<script src="../../static/vuex/vuex.global.js"></script>
<script src="../../static/vue-router/vue-router.global.js"></script>
<div id="app">
    <router-view></router-view>
</div>
<template id="Home">
    <van-config-provider :theme="theme" :theme-vars="themeVars">
        <div class="contentHome">
            <van-space :size="5" direction="vertical" fill>
                <div class="search_content_class" z-index="99">
                    <!--:offset-top="2"-->
                    <van-sticky :offset-top="search_navbarHeight" id="searchBtn">
                        <van-cell-group border="true" class="search_class" inset>
                            <van-row>
                                <!--                                <van-col span="3" @click="themeSwitch">-->
                                <!--                                    <div class="header_class_icon">-->
                                <!--                                        <van-image class="header_icon" lazy-load-->
                                <!--                                                   position="center" src="../icon/header.png"></van-image>-->
                                <!--                                    </div>-->
                                <!--                                </van-col>-->
                                <van-col span="6">
                                    <van-dropdown-menu active-color="#ee0a24" duration="0.3" style="height: 100%;">
                                        <van-dropdown-item :options="option" v-model="dropDownValue"/>
                                    </van-dropdown-menu>
                                </van-col>
                                <van-col span="18">
                                    <van-search
                                            @search="onSearch"
                                            @update:model-value="searchFiltr"
                                            left-icon=""
                                            placeholder="请输入"
                                            show-action v-model="searchValue">
                                        <template #action>
                                            <div @click="searchData">搜索</div>
                                        </template>
                                    </van-search>
                                </van-col>
                            </van-row>
                        </van-cell-group>
                    </van-sticky>
                </div>
                <div :class="['table_content_class',`table_content_color_${theme}`]">
                    <van-cell-group border="true" class="table_van_cell_group" inset>
                        <van-sticky :offset-top="table_navbarHeight" id="configBtn" z-index="9">
                            <van-row :class="tableThClassName(index)" justify="center">
                                <van-col span="2"></van-col>
                                <van-col span="4">姓名</van-col>
                                <van-col span="3">性别</van-col>
                                <van-col span="7">手机号码</van-col>
                                <van-col span="4">已进园区</van-col>
                                <van-col span="4">被访人</van-col>
                            </van-row>
                        </van-sticky>
                        <van-pull-refresh
                                :disabled="refreshDisabled"
                                @refresh="onRefresh"
                                success-text="刷新成功"
                                v-model="isLoading"
                        >
                            <div class="table_content_datalist" id="table_content_datalist">
                                <br>
                                <van-space direction="vertical" fill size="1rem">
                                    <van-row :class="tableRowClassName(index)" :key="index" class=""
                                             justify="center"
                                             v-for="(item, index) in showData" v-if="showData.length>0">
                                        <van-col class="child_checkbox" span="2">
                                            <van-checkbox :name="item.id" v-model="item.isCheckbox"></van-checkbox>
                                        </van-col>
                                        <van-col @click="goToLink(item)" class="child_checkbox" span="4">
                                            {{item.visitorsname}}
                                        </van-col>
                                        <van-col @click="goToLink(item)" class="child_checkbox" span="3">
                                            {{item.gender_}}
                                        </van-col>
                                        <van-col @click="goToLink(item)" class="child_checkbox" span="7">
                                            {{item.visitorsphone}}
                                        </van-col>
                                        <van-col @click="goToLink(item)" class="child_checkbox" span="4">
                                            {{item.visitstatus_}}
                                        </van-col>
                                        <van-col @click="goToLink(item)" class="child_checkbox" span="4">
                                            {{item.bfr_name}}
                                        </van-col>

                                    </van-row>

                                    <van-row justify="center" v-else>
                                        <van-col span="24">数据为空</van-col>
                                    </van-row>
                                </van-space>
                                <br>
                            </div>
                        </van-pull-refresh>
                    </van-cell-group>
                </div>
                <!-- 外层ul控制卡片范围 -->
                <div :class="[{moveBtn: longClick}, `${btnType}Btn`]" @click="batchEnterTheParkClick"
                     @touchend="touchEnd($event)"
                     @touchmove="touchMove($event)"
                     @touchstart="touchstart($event)"
                     class="floatBtn"
                     v-show="isShow"
                >
                    <span>批量进园区</span>
                </div>
            </van-space>
        </div>
    </van-config-provider>
</template>
<template id="VisitorInformation">
    <van-config-provider :theme="theme" :theme-vars="themeVars">
        <div class="contentVisitorInformation">
            <van-space :size="5" direction="vertical" fill>
                <!--                <div class="search_content_class" z-index="999">-->
                <!--                    <van-sticky :offset-top="navbarHeight">-->
                <!--                        <van-cell-group inset>-->
                <!--                            <van-nav-bar-->
                <!--                                    @click-left="onClickLeft"-->
                <!--                                    left-arrow-->
                <!--                                    left-text="返回"-->
                <!--                                    placeholder="true"-->
                <!--                                    title="人员详细信息"-->
                <!--                            ></van-nav-bar>-->
                <!--                        </van-cell-group>-->
                <!--                    </van-sticky>-->
                <!--                </div>-->
                <van-cell-group class="contentVisitorInformationInfo" inset>
                    <!-- 输入任意文本 -->
                    <van-field label="访客单位" readonly v-model="computed_info.visitorsunit"></van-field>
                    <van-field label="姓名" readonly v-model="computed_info.visitorsname"></van-field>
                    <van-field label="性别" readonly v-model="computed_info.gender"></van-field>
                    <!-- 输入手机号，调起手机号键盘 -->
                    <van-field label="手机号码" readonly type="tel" v-model="computed_info.visitorsphone"></van-field>
                    <van-field label="证件类型" readonly v-model="computed_info.documenttype"></van-field>
                    <van-field label="证件号码" readonly type="number" v-model="computed_info.documentnumber"></van-field>
                    <van-field disabled label="访客头像" model-value="无头像信息" v-show="!isExistTouxian"></van-field>
                    <van-field label="访客头像" readonly v-show="isExistTouxian"></van-field>
                    <van-cell-group inset v-show="isExistTouxian">
                        <van-swipe :autoplay="3000" lazy-render v-show="isExistTouxian && isTouxiangShow">
                            <van-swipe-item :key="index" v-for="(image, index) in tx_picture">
                                <van-image :src="image"
                                           @click="showPotoTX"
                                           fit="cover"
                                           height="10rem"
                                           position="left"
                                           width="10rem"></van-image>
                            </van-swipe-item>
                        </van-swipe>
                        <div style="display: flex;align-items: center;height: 10rem;width: 100%;justify-content: center;text-align: justify;color: #ccced3;"
                             v-show="!isTouxiangShow">
                            加载中···
                        </div>
                    </van-cell-group>
                    <van-field label="车牌号码" readonly v-model="computed_info.licensenumber"></van-field>
                    <van-field label="受访人" readonly v-model="computed_info.bfr_name"></van-field>
                    <van-field label="来访区域" readonly v-model="computed_info.place"></van-field>
                    <van-field label="来访时间" readonly v-model="computed_info.begintime"></van-field>
                    <van-field label="预离时间" readonly v-model="computed_info.endtime"></van-field>
                    <van-field label="携带物品" readonly v-model="computed_info.goods"></van-field>
                    <van-field disabled label="物品照片" model-value="无物品照片信息" v-show="!isExistWupin"></van-field>
                    <van-field label="物品照片" readonly v-show="isExistWupin"></van-field>
                    <van-cell-group inset>
                        <van-swipe :autoplay="3000" lazy-render v-show="isExistWupin && isWupingShow">
                            <van-swipe-item :key="index" v-for="(image, index) in wp_picture">
                                <van-image :src="image"
                                           @click="showPotoGO"
                                           fit="cover"
                                           height="10rem"
                                           position="left"
                                           width="10rem"></van-image>
                            </van-swipe-item>
                        </van-swipe>
                        <div style="display: flex;align-items: center;height: 10rem;width: 100%;justify-content: center;text-align: justify;color: #ccced3;"
                             v-show="!isWupingShow && isExistWupin">
                            加载中···
                        </div>
                    </van-cell-group>
                    <br>
                    <van-dialog
                            :title="dialogTitle"
                            close-on-click-overlay
                            confirm-button-color="red"
                            v-model:show="show">
                        <van-image :src="showPicture"></van-image>
                    </van-dialog>
                </van-cell-group>
                <!--            <div class="VisitorInformationButton">-->
                <van-cell-group border="false" class="bottom_button" inset="true">
                    <van-sticky :offset-bottom="4" position="bottom">
                        <van-button @click="EnterTheParkDataList" block round type="primary">确定进园区</van-button>
                    </van-sticky>
                </van-cell-group>
                <!--            </div>-->
            </van-space>
        </div>
    </van-config-provider>
</template>
<script>
    //var vConsole = new VConsole();
    /**
     * 第一页
     * @type {{template: string, setup(): *}}
     */
    const Home = {
        template: '#Home',
        setup(props, context) {
            let router = VueRouter.useRouter();
            let searchValue = Vue.ref('');
            let configBtn = Vue.ref(null);
            let navbarHeight = Vue.ref('0');
            let table_navbarHeight = Vue.ref('0');
            let search_navbarHeight = Vue.ref('0');
            let dropDownValue = Vue.ref(0);
            let isLoading = Vue.ref(false);
            // let theme = Vue.ref('light');
            //下拉选项
            let option = [
                {text: '姓名', value: 0},
                {text: '电话号码', value: 1},
                {text: '被访人', value: 2},
                {text: '证件号码', value: 3},
            ];
            let dataList = Vue.ref([]);
            let showData = Vue.ref([]);
            let store = Vuex.useStore();//这时的 store 就相当于 this.$store 了
            let themeSwitch = () => {
                store.dispatch('setTheme')
            };

            let batchEnterTheParkData = Vue.ref([]);
            let theme = Vue.computed({
                get: () => {
                    return store.getters.getTheme;
                },
                set: (v) => {

                }
            })
            let isShow = Vue.computed({
                get: () => {
                    let num = 0;
                    for (let i = 0; i < showData.value.length; i++) {
                        if (showData.value[i].isCheckbox) {
                            num = num + 1;
                        }
                        if (num > 1) {
                            return true;
                        }
                    }
                    return false;
                },
                set: (v) => {

                }
            })


            let timeOutEvent = Vue.ref('0');
            let longClick = Vue.ref('0');
            // 手指原始位置
            let oldMousePos = Vue.ref('{}');
            // 元素原始位置
            let oldNodePos = Vue.ref('{}');
            let btnType = Vue.ref('right');
            let refreshDisabled = Vue.ref(false);

            function searchFiltr(v) {
                let sV = v
                let dropDV = dropDownValue.value;
                /*证件*/
                showData.value = dataList.value.filter((item) => {
                    let documenttype = item.documenttype
                    if (documenttype == "0") {
                        item.documenttype_ = "身份证";
                    } else if (documenttype == "1") {
                        item.documenttype_ = "护照";
                    } else if (documenttype == "2") {
                        item.documenttype_ = "驾驶证";
                    } else if (documenttype == "3") {
                        item.documenttype_ = "其他";
                    }
                    return item
                })
                showData.value = dataList.value.filter((item) => {
                    let gender = item.gender
                    if (gender == "0") {
                        item.gender_ = "男";
                    } else if (gender == "1") {
                        item.gender_ = "女";
                    }
                    return item
                })
                showData.value = dataList.value.filter((item) => {
                    let visitstatus_ = item.visitstatus
                    if (visitstatus_ == "1") {
                        item.visitstatus_ = "是";
                    } else {
                        item.visitstatus_ = "否";
                    }
                    return item
                })

                if (sV == null || sV == "" || sV == undefined || dataList.value.length == 0) {
                    showData.value = JSON.parse(JSON.stringify(dataList.value));

                } else if (sV != null && sV != "" && sV != undefined && dataList.value.length > 0) {
                    if (dropDV == 0) {
                        //姓名过滤
                        showData.value = dataList.value.filter((item) => {
                            let name = item.visitorsname
                            item.isCheckbox = false;
                            if (name.includes(sV)) {
                                return item
                            }
                        })
                    } else if (dropDV == 1) {
                        //过滤电话号码
                        showData.value = dataList.value.filter((item) => {
                            let phone = item.visitorsphone;
                            item.isCheckbox = false;
                            if (phone.includes(sV)) {
                                return item
                            }
                        })
                    } else if (dropDV == 2) {
                        //被访人
                        showData.value = dataList.value.filter((item) => {
                            let bfName = item.bfr_name;
                            item.isCheckbox = false;
                            if (bfName.includes(sV)) {
                                return item
                            }
                        })
                    } else if (dropDV == 3) {
                        //身份证
                        showData.value = dataList.value.filter((item) => {
                            let idNumber = item.documentnumber;
                            item.isCheckbox = false;
                            if (idNumber.includes(sV)) {
                                return item
                            }
                        })
                    } else {
                        showData.value = JSON.parse(JSON.stringify(sV));
                    }

                }
            };
            let onSearch = (v) => {
                getDataInformation();
            }

            /**
             * 表单样式
             * */
            function tableThClassName() {
                if (theme.value == "light") {
                    return 'table_th_class_light';
                } else {
                    return 'table_th_class_dark';
                }

            };

            /**
             * 获取数据
             * */
            async function getDataInformation() {
                let loading = vant.showLoadingToast({
                    message: '加载中...',
                    forbidClick: true,
                })
                axios.get('/mobile/plugin/NSD/SE01DingDingApplication/request/FullDataList.jsp')
                    .then(function (response) {
                        vant.closeToast();
                        var code = response.data.code;
                        var message = response.data.message;
                        var data = response.data.data;
                        if (code == 'S') {
                            dataList.value = data;
                            searchFiltr(searchValue.value);
                        } else {
                            dataList.value = [];
                            searchFiltr(searchValue.value);
                            vant.showFailToast(message);
                        }
                    })
                    .catch(function (error) {
                        vant.closeToast();
                        vant.showFailToast('数据加载异常');
                    });
            };

            /**
             * 搜索 重新获取数据
             *
             * */
            function searchData() {
                let val = searchValue.value
                if (val != null && val != undefined && val != "") {
                    getDataInformation();
                } else {
                    vant.showFailToast('请输入查询条件');
                }

            }

            /**动态CSS样式*/
            function tableRowClassName(rowIndex) {
                if (theme.value == "light") {
                    if ((rowIndex % 2) === 1) {
                        return 'odd_column_light';
                    } else {
                        return 'even_column_light';
                    }
                } else {
                    if ((rowIndex % 2) === 1) {
                        return 'odd_column_dark';
                    } else {
                        return 'even_column_dark';
                    }
                }

            };

            /**
             * 路由跳转至详情信息页
             * */
            function goToLink(val) {
                router.push({name: 'VisitorInformation', params: {info: JSON.stringify(val)}});
            };

            //获取元素距顶距离
            function getElementToPageTop(el) {
                if (el.parentElement) {
                    return this.getElementToPageTop(el.parentElement) + el.offsetTop
                }
                return el.offsetTop
            }

            let themeVars = Vue.reactive({
                DropdownMenuHeight: '100%',

            });

            /**
             * 加载调用
             * */
            Vue.onMounted(() => {
                /** 监控**/
                window.addEventListener('scroll', handleScroll, true)
                table_navbarHeight.value = document.getElementById("configBtn").offsetTop;
                search_navbarHeight.value = document.getElementById("searchBtn").offsetTop;
                getDataInformation();
            });

            /**
             * 监听滚动条 设置下拉框是否可用
             * */
            function handleScroll(e) {
                let Height = document.getElementById("table_content_datalist").scrollTop
                if (Height == 0) {
                    refreshDisabled.value = false;
                } else {
                    refreshDisabled.value = true;
                }
            }

            //开始触屏
            function touchstart(ev) {
                // 定时器控制长按时间，超过500毫秒开始进行拖拽
                timeOutEvent.value = setTimeout(() => {
                    longClick.value = 1;
                }, 500);
                let selectDom = ev.currentTarget;
                let {pageX, pageY} = ev.touches[0]; // 手指位置
                let {offsetLeft, offsetTop} = selectDom; // 元素位置
                // 手指原始位置
                oldMousePos.value = {
                    x: pageX,
                    y: pageY
                };
                // 元素原始位置
                oldNodePos.value = {
                    x: offsetLeft,
                    y: offsetTop
                };
                selectDom.style.left = `${offsetLeft}px`;
                selectDom.style.top = `${offsetTop}px`;
            };

            function touchMove(ev) {
                // 未达到500毫秒就移动则不触发长按，清空定时器
                clearTimeout(timeOutEvent.value);
                if (longClick.value === 1) {
                    let selectDom = ev.currentTarget;
                    // x轴偏移量
                    let lefts = oldMousePos.value.x - oldNodePos.value.x;
                    // y轴偏移量
                    let tops = oldMousePos.value.y - oldNodePos.value.y;
                    let {pageX, pageY} = ev.touches[0]; // 手指位置
                    selectDom.style.left = `${pageX - lefts}px`;
                    selectDom.style.top = `${pageY - tops}px`;
                }
            };

            //结束触屏
            function touchEnd(ev) {

                // 清空定时器
                clearTimeout(timeOutEvent.value);
                if (longClick.value === 1) {
                    longClick.value = 0;
                    let selectDom = ev.currentTarget;
                    let {clientWidth, clientHeight} = document.body;
                    let {offsetLeft, offsetTop} = selectDom;
                    //clientWidth、clientHeight 元素内部宽度和高度,
                    //offsetLeft 当前对象到其上级层左边的距离 offsetTop 当前对象到其上级层顶部的距离
                    console.log("touchEnd clientWidth: " + clientWidth + " clientHeight:" + clientHeight)
                    console.log("touchEnd offsetLeft: " + offsetLeft + " offsetTop:" + offsetTop)
                    //touchEnd clientWidth: 414 clientHeight:0
                    //touchEnd offsetLeft: 305 offsetTop:389

                    selectDom.style.left = (offsetLeft + 50) > (clientWidth / 2) ?
                        'calc(100% - 100px)' : 0;
                    //距离顶部
                    if (offsetTop < 90) {
                        selectDom.style.top = '90px';
                    } else if (offsetTop + 36 > clientHeight) {
                        //selectDom.style.top = `${clientHeight - 36}px`;
                        selectDom.style.top = `${offsetTop - 36}px`;
                    }
                    //显示在左边还是右边
                    btnType.value =
                        (offsetLeft + 50) > (clientWidth / 2) ?
                            'right' : 'left';
                }
            };

            //过滤非选中数据
            function batchEnterTheParkDatafilter() {
                batchEnterTheParkData.value = showData.value.filter((item) => {
                    if (item.isCheckbox && item.visitstatus != "1") {
                        return item
                    }

                })
                return batchEnterTheParkData.value
            }

            //批量进园区
            function batchEnterTheParkClick() {
                batchEnterTheParkDatafilter()
                console.log(batchEnterTheParkData.value)
                vant.showConfirmDialog({
                    title: '确定进入园区?',
                    message: '请检查人员信息后确定进入园区',
                    confirmButtonText: '进园区',
                    confirmButtonColor: "#ee0a24",
                }).then(() => {
                    let info_ = batchEnterTheParkData.value
                    if (info_ == null || info_ == "" || info_ == undefined || info_.length < 1 || !Array.isArray(info_)) {
                        vant.showDialog({
                            title: '错误',
                            message: "请选择未进园区人员！",
                            confirmButtonColor: "#ee0a24",
                        });
                        return;
                    }
                    let data = "ObjectUser=" + JSON.stringify(info_);
                    axios.post('/mobile/EnterTheParkDataList.do', data,
                        {
                            header: {
                                'Content-Type': 'application/json'
                            }
                        }).then(function (response) {
                        let code = response.data.code;
                        let message = response.data.message;
                        if (code == 'S') {
                            vant.showSuccessToast('进园区成功');
                            setTimeout(() => {
                                getDataInformation();
                            }, 1000)

                        } else {
                            vant.showDialog({
                                title: '提示',
                                message: message,
                            })
                        }

                    }).catch(function (error) {
                        vant.showDialog({
                            title: '提示',
                            message: '进园区异常，请联系管理员。',
                        }).then(() => {
                            // on close
                        });
                    })

                }).catch(() => {
                    // on cancel
                });

            };

            //下拉刷新
            function onRefresh() {
                getDataInformation();
                isLoading.value = false;
            }

            return {
                option,
                dropDownValue,
                searchValue,
                dataList,
                showData,
                theme,
                themeVars,
                navbarHeight,
                table_navbarHeight,
                search_navbarHeight,
                timeOutEvent,
                longClick,
                oldMousePos,
                oldNodePos,
                btnType,
                isShow,
                configBtn,
                batchEnterTheParkData,
                isLoading,
                refreshDisabled,
                getDataInformation,
                themeSwitch,
                searchFiltr,
                onSearch,
                searchData,
                tableThClassName,
                tableRowClassName,
                goToLink,
                batchEnterTheParkDatafilter,
                batchEnterTheParkClick,
                getElementToPageTop,
                handleScroll,
                touchstart,
                touchMove,
                touchEnd,
                onRefresh
            };
        }
    }
    /**
     * 人员详情信息页
     * @type {{template: string, setup(): *}}
     */
    let VisitorInformation = {
        template: '#VisitorInformation',
        setup() {
            let navbarHeight = Vue.ref('0');
            let show = Vue.ref(false);
            let showPicture = Vue.ref('');
            let dialogTitle = Vue.ref('');
            let info_mation = Vue.ref(VueRouter.useRoute().params.info);
            let info = Vue.ref(JSON.parse(info_mation.value));
            let touxian_Picture_id = Vue.ref(info.value.visitorspicture);
            let wuping_Picture_id = Vue.ref(info.value.thingspicture);
            let tx_picture = Vue.ref([]);
            let wp_picture = Vue.ref([]);
            let store = Vuex.useStore();
            let theme = Vue.computed({
                get: () => {
                    return store.getters.getTheme;
                }
            });
            let isExistTouxian = Vue.computed({
                get: () => {
                    let info = touxian_Picture_id.value
                    if (info == null || info == "" || info == undefined) {
                        return false;
                    } else {
                        return true;
                    }
                }
            });
            let isExistWupin = Vue.computed({
                get: () => {
                    let info = wuping_Picture_id.value
                    if (info == null || info == "" || info == undefined) {
                        return false;
                    } else {
                        return true;
                    }
                }
            });
            let isWupingShow = Vue.computed({
                get: () => {
                    if (wp_picture.value.length > 0) {
                        return true;
                    } else {
                        return false;
                    }
                }
            });
            //页面处理后信息
            let computed_info = Vue.computed({
                get: () => {
                    let data = info.value;
                    if (data.gender == "0") {
                        data.gender = "男"
                    } else if (data.gender == "1") {
                        data.gender = "女"
                    }
                    ;

                    if (data.documenttype == "0") {
                        data.documenttype = "身份证"
                    } else if (data.documenttype == "1") {
                        data.documenttype = "护照"
                    } else if (data.documenttype == "2") {
                        data.documenttype = "驾驶证"
                    } else if (data.documenttype == "3") {
                        data.documenttype = "其他"
                    }
                    ;

                    if (data.place == "0") {
                        data.place = "南屏园区"
                    } else if (data.place == "1") {
                        data.place = "平沙园区"
                    }
                    ;

                    return data;
                }
            });
            //头像显示
            let isTouxiangShow = Vue.computed({
                get: () => {
                    if (tx_picture.value.length > 0) {
                        return true;
                    } else {
                        return false;
                    }
                }
            });

            //加载获取头像 和 物品图片信息
            Vue.onMounted(() => {
                getTxPicture();
                getWpPicture()
            })

            //获取头像
            async function getTxPicture() {
                if (touxian_Picture_id.value == null || touxian_Picture_id.value == undefined || touxian_Picture_id.value == "") {
                    return;
                }
                axios.get('/mobile/plugin/NSD/SE01DingDingApplication/request/getPictureData.jsp', {
                    params: {
                        pictures: touxian_Picture_id.value,
                    }
                }).then(function (response) {
                    let code = response.data.code;
                    let message = response.data.message;
                    if (code == 'S') {
                        tx_picture.value = response.data.data;
                    } else {
                        //vant.showFailToast(message);
                    }
                }).catch(function (error) {
                    vant.showFailToast('数据加载异');
                });
            }

            /**
             * 获取物品图片
             * */
            async function getWpPicture() {
                if (wuping_Picture_id.value == null || wuping_Picture_id.value == undefined || wuping_Picture_id.value == "") {
                    wp_picture.value = []
                    return;
                }
                axios.get('/mobile/plugin/NSD/SE01DingDingApplication/request/getPictureData.jsp', {
                    params: {
                        pictures: wuping_Picture_id.value
                    }
                }).then(function (response) {
                    let code = response.data.code;
                    let message = response.data.message;
                    if (code == 'S') {
                        wp_picture.value = response.data.data;
                    } else {
                        vant.showFailToast(message);
                    }
                })
                    .catch(function (error) {
                        vant.showFailToast('数据加载异');
                    });
            }

            let onClickLeft = () => history.back();

            //显示物品图片
            function showPotoGO() {
                vant.showImagePreview({
                    images: wp_picture.value,
                    closeable: true,
                });
            };

            //显示头像
            function showPotoTX() {
                vant.showImagePreview({
                    images: tx_picture.value,
                    closeable: true,
                });
            }

            //进园区
            function EnterTheParkDataList() {
                vant.showConfirmDialog({
                    title: '确定进园区?',
                    message: '请检查进园区人员是否正确！',
                    confirmButtonText: '进园区',
                    confirmButtonColor: "#ee0a24",
                }).then(() => {
                    let info_ = info.value
                    if (info_ == null || info_ == "" || info_ == undefined) {
                        vant.showDialog({
                            title: '提示',
                            message: "数据异常，无法进园区！",
                        });
                        return;
                    }

                    if (info_.visitstatus == "1") {
                        vant.showDialog({
                            title: '提示',
                            message: "人员已进园区，无需重复操作",
                        });
                        return;
                    }

                    var park_data = new Array();
                    park_data.push(info.value);
                    let data = "ObjectUser=" + JSON.stringify(park_data);
                    axios.post('/mobile//EnterTheParkDataList.do', data,
                        {
                            header: {
                                'Content-Type': 'application/json'
                            }
                        }).then(function (response) {
                        let code = response.data.code;
                        let message = response.data.message;
                        if (code == 'S') {
                            vant.showSuccessToast('进园区成功');
                            setTimeout(function () {
                                history.back()
                            }, 1500)
                        } else {
                            vant.showDialog({
                                title: '提示',
                                message: message,
                            })
                        }

                    }).catch(function (error) {
                        vant.showDialog({
                            title: '提示',
                            message: '进园区异常，请联系管理员。',
                        }).then(() => {
                            // on close
                        });
                    })

                }).catch(() => {
                    // on cancel
                });

            };

            return {
                navbarHeight,
                show,
                tx_picture,
                wp_picture,
                showPicture,
                dialogTitle,
                theme,
                info,
                computed_info,
                isExistTouxian,
                isExistWupin,
                info_mation,
                isWupingShow,
                isTouxiangShow,
                onClickLeft,
                showPotoGO,
                showPotoTX,
                EnterTheParkDataList

            };
        },
    }

    /**
     * 主题模式 暗黑dark  白色light
     * @type {{mutations: {setTheme(*, *): void}, state: {theme: string}, getters: {getTheme: (function(*): *)}, actions: {setTheme(*): void}}}
     */
    const myStore = {
        state: {
            theme: "light",
        },
        getters: {
            getTheme: (state) => {
                return state.theme
            }
        },
        mutations: {
            setTheme(state, theme) {
                state.theme = theme;
            }
        },
        actions: {
            setTheme(context) {

                //context:上下文，可以看成是store(默认参数)
                //contex.dispatch可以用于触发其他action
                if (context.state.theme == "light") {
                    context.commit("setTheme", "dark");
                } else {
                    context.commit("setTheme", "light");
                }
            }
        }
    }
    // 建立vuex的实例，vue3需要挂载实例
    const myVuex = Vuex.createStore(myStore)

    // 2. 定义一些路由
    // 每个路由都需要映射到一个组件。
    let routes = [
        {path: '/', component: Home, name: 'Home'},
        {path: '/VisitorInformation', component: VisitorInformation, name: 'VisitorInformation'},
    ]

    // 3. 创建路由实例并传递 `routes` 配置
    let router = VueRouter.createRouter({
        // 4.  history 模式的。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
    })

    // 5. 创建并挂载根实例
    let app = Vue.createApp({})
        .use(myVuex) // 挂载vuex
        .use(vant)
        .use(vant.Col)
        .use(vant.Row)
        .use(vant.Search)
        .use(vant.Cell)
        .use(vant.CellGroup)
        .use(vant.Lazyload)
        .use(vant.Field)
        .use(vant.DropdownMenu)
        .use(vant.DropdownItem)
        .use(vant.Form)
        .use(vant.ConfigProvider)
        .use(vant.Dialog)
        .use(vant.Sticky)
        .use(vant.Checkbox)
        .use(vant.CheckboxGroup)
        .use(vant.Space)
        .use(vant.Swipe)
        .use(vant.SwipeItem)
        .use(vant.Lazyload)
        .use(vant.PullRefresh)
        .use(vant.Loading)
        .use(router)
        .mount('#app');
</script>

</body>
</html>